import './App.css';
import { BrowserRouter as Router, Route, Routes, Link } from 'react-router-dom'; // 注意这里的导入方式
import Home from '../src/views/recommend/recommend';
import Top from '../src/views/top/top';

function App() {
  return (
    <Router>
      <div>
        <nav>
          <ul>
            <li>
              <Link to="/">推荐</Link>
            </li>
            <li>
              <Link to="/top">排行</Link>
            </li>
          </ul>
        </nav>

        <Routes> {/* 使用 Routes 组件而不是 Switch */}
          <Route path="/" element={<Home />} /> {/* 使用 element 属性传递组件 */}
          <Route path="/top" element={<Top />} />
        </Routes>
      </div>
    </Router>
  );
}

export default App;
